<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <textarea id="editor"></textarea>
    <button onclick="getPlainTxt()">获取纯文本</button>
    <script
      type="text/javascript"
      charset="utf-8"
      src="./ueditorbjq/ueditor.config.js"
    ></script>
    <script
      type="text/javascript"
      charset="utf-8"
      src="./ueditorbjq/ueditor.all.js"
    ></script>
    <script src="./ueditorbjq/lang/zh-cn/zh-cn.js"></script>
    <script>
      /* 
        设置clob的时候值是 &nbsp; &nbsp;(先空格后nbsp;)导致界面渲染少一个空格
        而手动输入时是&nbsp; &nbsp; (先nbsp空格)
       */
      var ue = UE.getEditor("editor", {
        initialFrameWidth: 800,
        initialFrameHeight: 300,
      });

      let txt = `    设置<span style='color:red;'>哈哈</span>这是一 s段文字文字文置
    这是一段文字文字文字文这是一段文字文<span style='color:red;'>哈哈</span>字文字文
      `;
      //匹配空格且前面值为<span的空格
      txt = txt.replace(/\n/g, "<br>").replace(/\s(?!style='color)/g, "&nbsp;");
      ue.ready(function (editor) {
        ue.setContent(txt);
      });
      ue.addListener("keydown", function (e, event) {
        const cursorPos = this.selectionStart;
        console.log(cursorPos);
      });
      ue.addListener("focus", function (e, event) {
        console.log(event);
      });
    </script>
  </body>
</html>
